<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2017/10/26
  Time: 0:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
    <title>Title</title>

    <script type="text/javascript">
        var temp = function(){
           var aNodes = document.getElementsByTagName("a");
           for(var i=0;i<aNodes.length;i++){
               aNodes[i].onclick = function () {
                   var xmlhttprequest =new XMLHttpRequest();
                   var method = "GET";
                   var url = this.href;
                   xmlhttprequest.open(method,url);
                   xmlhttprequest.send(null);
                   xmlhttprequest.onreadystatechange = function () {
                       if (xmlhttprequest.readyState == 4) {
                           if (xmlhttprequest.status == 200 || xmlhttprequest.status == 304) {
                               /*
                               不同点：
                                1.结果为xml格式，所以需要用responseXML获取
                                */
                               var result = xmlhttprequest.responseXML;
                               //2.不能直接用，必须先创建节点，在把节点加到#details中
                               /*目标格式：
                                    <h2><a href="mailto:andy@clearleft.com">andy_budd</a></h2>
<a href="http://andybudd.com">http://andybudd.com</a>
                                */
                               var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
                               var website = result.getElementsByTagName("website")[0].firstChild.nodeValue;
                               var email = result.getElementsByTagName("email")[0].firstChild.nodeValue;
                                alert(name+" "+website);
                               var aNode = document.createElement("a");
                               aNode.appendChild(document.createTextNode(name));
                               aNode.href="mailto:"+email;

                               var h2Node = document.createElement("h2");
                               h2Node.appendChild(aNode);

                               var aNode2 = document.createElement("a");
                               aNode2.appendChild(document.createTextNode(website));
                               aNode2.href = website;

                               var details = document.getElementById("details");
                               details.innerHTML = "";
                               details.appendChild(h2Node);
                               details.appendChild(aNode2);
                           }
                       }
                   }
                   return false;
               }
           }
       }
    </script>
</head>
<body onload="temp()">
    <h1>people</h1>
    <ul>
        <LI><a HREF="files/andy.xml">Andy</a></LI>
        <LI><a href="#">Richard</a></LI>
        <LI><a href="#">Jermy</a></LI>
    </ul>
    <div id="details"></div>
</body>
</html>
